<template>
  <div class="start">
    <!-- 头部 -->
    <div class="header_box">
      <span @click="$router.go(-1)" v-if="$route.path!='/home'" class="goback">
        <van-icon style="margin-right:3px;" name="arrow-left" />
        返回
      </span>
      我的订单
    </div>
    <!-- 搜索 -->
    <van-search  show-action shape="round" placeholder="搜索我的订单">
      <template #action>
        <div>搜索</div>
      </template>
    </van-search>
    <!-- tab栏 -->
    <van-tabs v-model="activeName">
      <van-tab title="全部" name="a">
        <van-swipe-cell v-for="(item, index) in lists" :key="index">
          <van-card
            :num="item.num"
            :price="item.price"
            :desc="item.desc"
            :title="item.title"
            :thumb="item.thumb"
          >
            <template #tags>
              <van-tag plain type="danger">hot</van-tag>
              <van-tag plain type="danger">新潮</van-tag>
            </template>
            <template #footer>
              <van-button size="mini">卖了换钱</van-button>
              <van-button size="mini">评价</van-button>
            </template>
          </van-card>
        </van-swipe-cell>
      </van-tab>
      <van-tab title="待付款" nambe="b">
        <van-swipe-cell>
          <van-card
            num="3"
            price="4.00"
            desc="快付款"
            title="请付款"
            thumb="https://img.yzcdn.cn/vant/leaf.jpg"
          >
            <template #tags>
              <van-tag plain type="danger">hot</van-tag>
              <van-tag plain type="danger">新潮</van-tag>
            </template>
            <template #footer>
              <van-button size="mini">取消订单</van-button>
              <van-button size="mini">付款</van-button>
            </template>
          </van-card>
        </van-swipe-cell>
      </van-tab>
      <van-tab title="待收货" name="c" class="order">
        <van-icon name="orders-o" />您暂时没有相关订单
      </van-tab>
      <van-tab title="已完成" namce="d">
        <van-swipe-cell v-for="(item, index) in lists" :key="index">
          <van-card
            :num="item.num"
            :price="item.price"
            :desc="item.desc"
            :title="item.title"
            :thumb="item.thumb"
          >
            <template #tags>
              <van-tag plain type="danger">hot</van-tag>
              <van-tag plain type="danger">新潮</van-tag>
            </template>
            <template #footer>
              <van-button size="mini">卖了换钱</van-button>
              <van-button size="mini">评价</van-button>
            </template>
          </van-card>
        </van-swipe-cell>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      active: 0,
      activeName: 'a',
      lists: [
        {
          num: '2',
          price: '3.00',
          desc: '好汉男人帮',
          title: '水浒传',
          thumb: 'https://img.yzcdn.cn/vant/leaf.jpg'
        },
        {
          num: '4',
          price: '5.00',
          desc: '鬼怪的世界',
          title: '西游记',
          thumb: 'https://img.yzcdn.cn/vant/ipad.jpeg'
        },
        {
          num: '6',
          price: '7.00',
          desc: '一个大宅院的故事',
          title: '红楼梦',
          thumb: 'https://img.yzcdn.cn/vant/leaf.jpg'
        },
        {
          num: '8',
          price: '9.00',
          desc: '带你走进自己内心深处',
          title: '一个人的村庄',
          thumb: 'https://img.yzcdn.cn/vant/cat.jpeg'
        },
        {
          num: '10',
          price: '2.00',
          desc: '谁还没隔个美好的童年',
          title: '小王子',
          thumb: 'https://img.yzcdn.cn/vant/cat.jpeg'
        }
      ]
    }
  }

}
</script>
<style lang="less" scoped>
.start {
  height: 100%;
  background-color: #f7f7f7;
}
.header {
  background-color: #f0f3ef;
}
.header_box {
  width:100%;
  height:40px;
  background: #1989fa;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
  position: fixed;
  top:0;
  left:0;
  z-index:1;
}
.goback {
  position: fixed;
  top:0px;
  display: flex;
  align-items: center;
  left:15px;
}
.iconfont {
  display: block;
  font-size: 20px;
  margin: 0 auto 5px;
}
.van-search {
  background-color: #f7f7f7;
}
.order {
  // height: 325px;
  padding: 200px 0 300px 0;
  text-align: center;
}
.van-swipe-cell {
  margin-top: 10px;
}
</style>
